<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/MyVideo.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="js/jquery.params.js"></script>

    <style>
        .modal-dialog {
            position: absolute !important;
            top:50% !important;
            left:50% !important;
            transform:translate(-50%,-50%) !important;
            -webkit-transform:translate(-50%,-50%) !important;
            -moz-transform:translate(-50%,-50%) !important;
            -ms-transform:translate(-50%,-50%) !important;
            -o-transform:translate(-50%,-50%) !important;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="app">
    <!--                            登录弹窗-->
    <div class="modal fade" id="loginWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <!--                                        内容-->
                <div class="modal-body">

                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">用户名</label>
                            <input v-model="user.username" type="text" class="form-control" id="exampleInputEmail1"/>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">密码</label>
                            <input v-model="user.password" type="password" class="form-control"
                                   id="exampleInputPassword1"/>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="login">登录</button>
                </div>
            </div>

        </div>

    </div>


    <div  class="modal fade" id="EnrollWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <!--                                        内容-->
                <div  class="modal-body">

                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEnrollEmail1">用户账号</label>
                            <input v-model="user.username" type="text" class="form-control" id="exampleInputEnrollEmail1" />
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollPassword1">密码</label>
                            <input v-model="user.password" type="password" class="form-control" id="exampleInputEnrollPassword1" />
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollPassword2">请重新输入密码</label>
                            <input v-model="user.password1" type="password" class="form-control" id="exampleInputEnrollPassword2" />
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollName1">用户名</label>
                            <input v-model="user.uname" type="text" class="form-control" id="exampleInputEnrollName1"  />
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollEmail2">邮箱</label>
                            <input v-model="user.uemail" type="text" class="form-control" id="exampleInputEnrollEmail2" value="可不填" />
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEnrollPhone1">手机号</label>
                            <input v-model="user.uphone" type="text" class="form-control" id="exampleInputEnrollPhone1" value="可不填" />
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="check">注册</button>
                </div>
            </div>
        </div>
    </div>
    <!--    头部导航栏-->
    <header>
        <div style="height: 100px; width:98%;position:fixed;z-index: 50">
            <div class="col-md-push-12 column">

                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="main.html">首页</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="#">番剧</a>
                            </li>
                            <li>
                                <a href="#">直播</a>
                            </li>
                        </ul>

                        <!--                    搜索框-->
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group" style="width: 500px">
                                <input type="text" class="form-control" @keyup.enter="select" v-model="input" style="width: 495px"/>
                                <input type="text" hidden="hidden">
                            </div>
                            <button type="button" class="btn btn-default" @click="select">查询</button>
                        </form>

                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a v-show="loginDialog" id="modal-12089" href="#loginWin" role="button" class="btn" data-toggle="modal">
                                    登录
                                </a>
                            </li>

                            <li>
                                <a v-show="loginDialog" id="modal-12090" href="#EnrollWin" role="button" class="btn" data-toggle="modal">注册</a>
                            </li>


                            <li v-show="!loginDialog" style="padding-top: 4px">
                                <a href="yhzy.html" style="padding-top: 0px">
                                    <img :src="person.uimage" style="width: 40px;height: 40px;border-radius: 20px">
                                </a>
                            </li>

                            <li v-show="!loginDialog">
                                <a><button style="border-style: none" @click="logout">退出登录</button></a>
                            </li>
                            <li>
                                <a href="sc.html">收藏</a>
                            </li>
                            <li>
                                <a href="videohistory.html" target="_blank">历史</a>
                            </li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </header>

    <!--  中间部分-->
    <div class="row clearfix" style="padding: 100px 50px 50px 90px">
        <!--    播放区-->
        <div class="col-md-8 column">

            <div style="height: 30px;font-size: 25px;padding-bottom: 40px">{{ video.vtitle }}</div>
            <div style="height: 30px;width: 500px; padding-bottom: 40px;font-size: 10px;display: inline-block;vertical-align: center">
                <span>
                    <input type="image" src="img/img_6.png" width="25" height="25">
                </span>
                <span style="padding-right: 15px;">{{ video.vcount }}</span>

                <span style="padding-right: 15px">
                    <input type="image" src="img/img_7.png" width="25" height="25">
                    {{ video.vuptime }}
                </span>
                <span style="padding-right: 15px">
                    <input type="image" src="img/img_8.png" width="25" height="25" style="border-radius: 20px">
                    未经作者授权，禁止转载！
                </span>


            </div>

            <video muted controls width="900" height="500" autoplay="autoplay" :src="video.vurl" >
            </video>

            <!--      点赞区、收藏-->
            <div style="padding-top: 10px">
                <!--        点赞-->
                <span style="padding-right: 20px">
                        <a href="javascript:void(0)" class="" role="button" id="like" style="text-decoration: none;" @click="like">
                            <span class="glyphicon glyphicon-thumbs-up" style="padding-right: 10px;color: grey;font-size: 40px"></span>
                            <span class="like-count" style="font-size: 20px"> {{ video.vlike }}</span>
                        </a>
                </span>
                <!--                    //收藏效果-->
                <span style="padding-right: 20px">
                        <a href="javascript:void(0)" class="" role="button" id="like2" style="text-decoration: none" @click="collectVideo()">
                            <span class="glyphicon glyphicon-heart" style="padding-right: 10px;color: grey;font-size: 40px"> </span>
                            <span class="like-count2"style=" font-size: 20px;">{{ video.vcollect}}</span>
                        </a>
                </span>

                <!--                    //分享效果-->
                <span style="padding-right: 20px">
                        <a href="javascript:void(0)" class="" role="button"  style="text-decoration: none">
                            <span class="glyphicon glyphicon-send" style="padding-right: 10px;color: grey;font-size: 40px"> </span>
                            <span class="like-count2"style=" font-size: 20px;"></span>
                        </a>
                </span>
            </div>
            <hr>
            <!--      评论区-->
            <div style="padding-top: 30px">
                <h2>评论</h2>
                <hr>

                <div class="row clearfix" style="padding-top: 10px" v-for="(item0,index0) in comment0" :key="item0.rid">
                    <div class="col-md-1 column">
<!--                        用户头像-->
                      <span>
                        <img :src="item0.uimage" style="width: 70px;height: 70px;border-radius: 35px">
                      </span>
                    </div>
                    <div class="col-md-11 column">
                        <!--            用户名-->
                        <div style="padding-bottom: 4px;font-size: 15px" >
                            {{ item0.uname }}
                        </div>
                        <!--            评论内容-->
                        <div style="font-size: 20px">{{ item0.remark }}</div>
                        <!--            评论时间、点赞-->
                        <div style="padding-top: 5px;">
                            <span style="padding-right: 20px;color: rgba(0,0,0,0.5)">
                              {{ item0.remarktime }}
                            </span>

                            <!--        点赞-->
                            <span style="padding-right: 20px">
                                <a href="javascript:void(0)" class="" role="button" :id="'replyLike'+item0.rid" style="text-decoration: none;" @click="remarkLike(item0.rid)">
                                    <span class="glyphicon glyphicon-thumbs-up" style="padding-right: 10px;color: grey;font-size: 25px"></span>
                                    <span class="like-count" style="font-size: 10px"> {{ item0.remarklike }}</span>
                                </a>
                            </span>

                            <span style="padding-right: 20px">
                                <a href="javascript:void(0)" class="" role="button" id="" style="text-decoration: none;">
                                    <span class="glyphicon glyphicon-thumbs-up" style="padding-right: 10px;color: grey;font-size: 25px;transform: rotateX(180deg)"></span>
                                    <span class="like-count" style="font-size: 10px"></span>
                                </a>
                            </span>


                            <span>
                                <button type="button" class="btn btn-default btn-link" style="color: rgba(0,0,0,0.5);float: right" @click="replyShow(item0.rid)">回复>></button>
                            </span>

                            <span v-show="person.uid==item0.uid">
                                <button type="button" class="btn btn-default btn-link" style="color: rgba(0,0,0,0.5);float: right" @click="deleteRemark(item0.rid)">删除</button>
                            </span>
                        </div>
                        <hr style="padding-top: 5px">

<!--                        主评论回复-->
                        <div class="row clearfix">
                            <div class="col-md-1 column">

                            </div>
                            <div class="col-md-11 column">
                                <div style="height: 50px;padding-top: 20px;display: none" :id="'show'+item0.rid" class="win">
                                    <div class="col-md-push-12 column">
                                        <nav class="navbar navbar-default" role="navigation">
                                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4">

                                                <!--                    回复-->
                                                <form class="navbar-form navbar-left" role="search">
                                                    <div class="form-group" style="width: 580px">
                                                        <input type="text" class="form-control" @keyup.enter="reply(item0.rid,item0.uname)" v-model="myReply" style="width: 575px" :placeholder="'@'+item0.uname"/>
                                                        <input type="text" hidden="hidden">
                                                    </div>
                                                    <button type="button" class="btn btn-default" @click="reply(item0.rid,item0.uname)" >发布</button>
                                                </form>

                                            </div>

                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>

<!--                        回复-->
                        <div v-for="(item1,key,index) in comment1" :key="item1.rid">
                         <div v-for="(i,inx) in item1" :key="i.rid" class="row clearfix" style="padding-top: 10px"  v-if="item0.rid==key">
                             <div>
                                 <div class="col-md-1 column">
                                 <span>
                                    <img :src="i.uimage" style="width: 70px;height: 70px;border-radius: 35px">
                                 </span>
                                 </div>
                                 <div class="col-md-11 column" style="padding-left: 22px">
                                     <!--            用户名-->
                                     <div style="padding-bottom: 4px;font-size: 15px" >
                                         {{ i.uname }}
                                     </div>
                                     <!--            评论内容-->
                                     <div style="font-size: 20px">{{ i.remark }}</div>
                                     <!--            评论时间、点赞-->
                                     <div style="padding-top: 5px;">

                                         <span style="padding-right: 10px;color: rgba(0,0,0,0.5)">
                                        {{ i.remarktime }}
                                         </span>

                                         <!--        点赞-->
                                         <span style="padding-right: 20px">
                                            <a href="javascript:void(0)" class="" role="button" :id="'replyLike'+i.rid" style="text-decoration: none;" @click="remarkLike(i.rid)">
                                                <span class="glyphicon glyphicon-thumbs-up" style="padding-right: 10px;color: grey;font-size: 25px"></span>
                                                <span class="like-count" style="font-size: 10px"> {{ i.remarklike }}</span>
                                            </a>
                                        </span>

                                         <span style="padding-right: 20px">
                                            <a href="javascript:void(0)" class="" role="button" :id="" style="text-decoration: none;">
                                                <span class="glyphicon glyphicon-thumbs-up" style="padding-right: 10px;color: grey;font-size: 25px;transform: rotateX(180deg)"></span>
                                                <span class="like-count" style="font-size: 10px"></span>
                                            </a>
                                        </span>

                                         <span>
                                          <button type="button" class="btn btn-default btn-link" style="color: rgba(0,0,0,0.5);float: right" @click="replyShow(i.rid)">回复>></button>
                                         </span>
                                         <span v-show="person.uid==i.uid">
                                             <button type="button" class="btn btn-default btn-link" style="color: rgba(0,0,0,0.5);float: right" @click="deleteRemark(i.rid)">删除</button>
                                         </span>
                                     </div>
                                     <!--                                 子评论回复-->
                                     <div style="height: 50px;padding-top: 20px;display: none" :id="'show'+i.rid" class="win">
                                         <div class="col-md-push-12 column">
                                             <nav class="navbar navbar-default" role="navigation">
                                                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">

                                                     <!--                    回复-->
                                                     <form class="navbar-form navbar-left" role="search">
                                                         <div class="form-group" style="width: 580px">
                                                             <input type="text" class="form-control" @keyup.enter="reply(item0.rid,i.uname)" v-model="myReply" style="width: 575px" :placeholder="'@'+i.uname"/>
                                                             <input type="text" hidden="hidden">
                                                         </div>
                                                         <button type="button" class="btn btn-default" @click="reply(item0.rid,i.uname)" style="background-color: #6AD4FF ">发布</button>
                                                     </form>

                                                 </div>

                                             </nav>
                                         </div>
                                     </div>
                                     <hr style="padding-top: 5px">
                                 </div>
                             </div>
                         </div>
                        </div>
<!--                        <input type="button" value="点击查看" style="border-style: none;padding-top: 0px">-->


                    </div>


                </div>

                <div style="height: 50px;position: fixed;left:100px;bottom:0;">
                        <div class="col-md-push-12 column">
                            <nav class="navbar navbar-default" role="navigation">
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

                                    <!--                    回复-->
                                    <form class="navbar-form navbar-left" role="search">
                                        <div class="form-group" style="width: 800px">
                                            <input type="text" class="form-control" @keyup.enter="remark(0)"  v-model="myRemark" style="width: 795px" placeholder="人与人之间的交流应该多一点友善^_^"/>
                                            <input type="text" hidden="hidden">
                                        </div>
                                        <button type="button" class="btn btn-default" @click="remark(0)" style="background-color: #6AD4FF ">发布</button>
                                    </form>

                                </div>

                            </nav>
                        </div>
                    </div>

            </div>
        </div>

        <div class="col-md-4 column" style="padding-left: 60px">
            <div style="height: 50px;font-size: 20px">推荐</div><hr>
            <div v-for="(temp,index) in videos">
                <a :href="'view.html?vid='+temp.vid" target="_blank" @click="collect(temp.vid)" style="display: inline-block;width: 300px;height: 120px">
                    <span style="padding-right: 10px">
                        <img :src="temp.vcover" width="180" height="120">
                    </span>
                    <span>
                        <div style="display: inline-block;vertical-align: -40px;width: 110px">{{ temp.vtitle }}
                            <br>
                            <div style="padding-top: 5px">
                                <input type="image" src="img/img_6.png" width="20" height="20">{{ temp.vcount }}
                            </div>
                            <div style="padding-top: 5px">
                                <input type="image" src="img/img_2.png" width="20" height="20">{{ temp.vcollect }}
                            </div>
                        </div>

                    </span>

                </a>
                <hr>
            </div>
        </div>
    </div>

</div>


<script>
    function  VideoLike(uid, vid,isLike, isCollect) {
        // 属性
        this.id=uid+vid
        this.uid = uid;
        this.vid = vid;
        this.isLike = isLike;
        this.isCollect=isCollect
    }

    function  RemarkLike(rid,uid,vid,isLike) {
        // 属性
        this.rid=rid
        this.uid = uid;
        this.vid = vid;
        this.isLike = isLike;
    }

  const app = Vue.createApp({
        data() {
            return {
                input: '',
                user:{
                    username:'',
                    password:''
                },
                person: {},
                loginDialog: true,
                current: 0,
                limit: 1,
                arr: [],
                comment0:{},
                comment1:{},
                myReply:'',         //发布评论
                isReply:false,
                myRemark:'',
                video:{},
                vid: 0,            //当前视频id
                videoLike: false, //视频点赞
                videoCollect: false,
                clickLike: '',  //评论点赞
                clickLikes:[],    //评论点赞集合
                videos:{},        //推荐视频

                videolikes:[],
                remarklikes0:[]
            }
        },
        created() {
            this.init()
            this.getVideo()
            //localStorage.removeItem("remarklikes0")
        },mounted(){
          this.initStatus()
          this.comment()
        },
        methods: {
            //视频点赞按钮
            like() {
                if (localStorage.getItem("person")!==null){
                    this.videoLike=!this.videoLike
                    axios({
                        method: 'post',
                        url: `/video/Like`,
                        params: {
                            vid: this.vid,
                            videoLike: this.videoLike
                        }
                    }).then(response => {
                        let likeBtn = $('#like');
                        if (this.videoLike){
                            this.init()
                            likeBtn.find('span').css('color','orange');
                            layer.msg("点赞成功！")
                        }else {
                            this.init()
                            likeBtn.find('span').css('color','grey');
                            layer.msg("取消点赞！")
                        }
                        this.save()   //更新点赞收藏状态
                    })
                }else {
                    layer.msg('请先登录!')
                }
            },
            //评论点赞
            remarkLike(rid){
                if (localStorage.getItem("person")!==null){
                    this.clickLike=!this.clickLike
                    axios({
                        method: 'post',
                        url: `/remark/remarkLike`,
                        params: {
                            rid: rid,
                            clickLike: this.clickLike
                        }
                    }).then(response =>{
                        let likeBtn = $('#replyLike'+rid);
                        if (this.clickLike){
                            //this.add(rid,true)
                            this.comment()
                            likeBtn.find('span').css('color','orange');
                            layer.msg('点赞成功!')
                        }else {
                            //this.add(rid,false)
                            this.comment()
                            likeBtn.find('span').css('color','grey');
                            layer.msg('取消点赞!')
                        }
                    })
                }else {
                    layer.msg('请先登录！')
                }
            },
            //视频收藏
            collectVideo(){
                if (localStorage.getItem("person")!==null){
                    this.videoCollect=!this.videoCollect
                    axios({
                        method: 'post',
                        url: `/video/collect`,
                        params: {
                            uid:this.person.uid,
                            vid: this.vid,
                            videoCollect: this.videoCollect
                        }
                    }).then(response => {
                        this.init()
                        let likeBtn = $('#like2');
                        if (response.data.code===1){
                            likeBtn.find('span').css('color','orange');
                            layer.msg('收藏成功')
                        }else if (response.data.code===0){
                            likeBtn.find('span').css('color','grey');
                            layer.msg('取消收藏')
                        }else if (response.data.code===2){
                            layer.msg('已收藏')
                        }
                        this.save()   //更新点赞收藏状态
                    })
                }else {
                    layer.msg('请先登录!')
                }


            },
            getVideo(){
                axios({
                    method: 'post',
                    url: `/video/getVideo`,
                    params: {
                        vid: this.vid,
                    }
                }).then(response => {
                    this.videos=response.data.data
                })
            },
            select(){
                if (this.input.trim().length===0){
                    layer.msg('请输入搜索内容')
                }else {
                    window.location.href="ssym.html?keyword="+this.input
                }
            },
            comment(){
                axios({
                    method: 'post',
                    url: `/remark/getComment0`,
                    params: {
                        vid: this.vid,
                    }
                }).then(response => {
                    this.comment0=response.data.data
                    //console.log(this.comment0)
                    //this.initComment()
                })
                axios({
                    method: 'post',
                    url: `/remark/getComment1`,
                    params: {
                        vid: this.vid,
                    }
                }).then(response => {
                    this.comment1=response.data.data
                })
            },
            init(){
                if (JSON.parse(localStorage.getItem("person"))!=null){
                    this.person=JSON.parse(localStorage.getItem("person"))
                    this.loginDialog=false
                }else {
                    this.loginDialog=true
                }
                this.vid=$.query.get("vid")
                axios({
                    method: 'post',
                    url: `/video/selectVideo`,
                    params: {
                        vid: this.vid,
                    }
                }).then(response => {
                    this.video=response.data.data
                })

            },
            login(){
                if (this.user.username.trim().length===0 || this.user.password.trim().length===0){
                    layer.msg('用户名和密码不能为空')
                }else {
                    axios({
                        method:'post',
                        url:'/users/login',
                        params: {
                            uid: this.user.username,
                            pwd: this.user.password
                        }
                    }).then(response =>{
                        if (response.data.code === 20041){
                            this.loginDialog=false
                            this.person=response.data.data
                            $('#loginWin').modal('hide')
                            localStorage.setItem("person",JSON.stringify(this.person))
                            layer.msg('登录成功！')
                            window.location.reload()
                        }else {
                            layer.msg('用户名或密码不正确！')
                        }
                    })
                }

            },
            logout(){
                localStorage.removeItem("person");
                this.loginDialog=true
                window.location.reload()
            },
            //回复
            reply(rid,name){
                if (this.myReply.trim().length===0){
                    layer.msg('您还没有评论！')
                }else if(JSON.parse(localStorage.getItem("person"))==null){
                    layer.msg('您还没有登录，先登录再评论哦！')
                } else {
                    axios({
                        method: 'post',
                        url: `/remark/pushRemark`,
                        params: {
                            vid: this.vid,
                            uid:this.person.uid,
                            myReply: '@'+name+':'+this.myReply,
                            rid:rid
                        }
                    }).then(response => {
                        layer.msg('评论成功！')
                        this.myReply=''
                        $('.win').hide()
                        this.comment()
                    })
                }


            },
            //评论
            remark(rid){
                if (this.myRemark.trim().length===0){
                    layer.msg('您还没有评论！')
                }else if(JSON.parse(localStorage.getItem("person"))==null){
                    layer.msg('您还没有登录，先登录再评论哦！')
                } else {
                    axios({
                        method: 'post',
                        url: `/remark/pushRemark`,
                        params: {
                            vid: this.vid,
                            uid:this.person.uid,
                            myReply: this.myRemark,
                            rid:rid
                        }
                    }).then(response => {
                        layer.msg('评论成功！')
                        this.myRemark=''
                        this.comment()
                    })
                }
            },
            deleteRemark(rid){
                layer.confirm('真的删除吗!',function (index){
                        axios({
                            method: 'post',
                            url: `/remark/deleteRemark`,
                            params: {
                                rid:rid
                            }
                        }).then(response => {
                            layer.msg('删除成功！')
                            app.comment()
                        })
                })

            },
            replyShow(i){
                this.isReply=!this.isReply
                if (this.isReply){
                    $('#show'+i).show();
                }else {
                    $('.win').hide()
                }
            },
            //添加历史记录
            collect(vid){
                if (localStorage.getItem("person")!==null){
                    axios({
                        method:'post',
                        url:`/history/add`,
                        params:{
                            vid:vid,
                            uid:this.person.uid
                        }
                    })
                }
            },
            //遍历视频点赞收藏状态
            initStatus(){
                //视频点赞收藏状态
                if (JSON.parse(localStorage.getItem("person"))!=null){
                    if (JSON.parse(localStorage.getItem("videolikes"))!=null && JSON.parse(localStorage.getItem("videolikes")).length!==0 ){
                        this.videolikes=JSON.parse(localStorage.getItem("videolikes"))
                        let temp=null;
                        for (let i = 0; i < this.videolikes.length; i++) {
                            if (this.videolikes[i].vid===this.vid && this.videolikes[i].uid===this.person.uid){
                                temp=this.videolikes[i]
                                this.videoLike=this.videolikes[i].isLike
                                this.videoCollect=this.videolikes[i].isCollect
                                let likeBtn2 = $('#like2');
                                let likeBtn = $('#like');
                                if (this.videoCollect){
                                    likeBtn2.find('span').css('color','orange');
                                }
                                if (this.videoLike){
                                    likeBtn.find('span').css('color','orange');
                                }
                            }
                        }
                        if (temp===null){
                            //第一次添加
                            let videolike = new VideoLike(this.person.uid,this.vid,this.videoLike,this.videoCollect)
                            this.videolikes.push(videolike)
                            localStorage.setItem("videolikes",JSON.stringify(this.videolikes))
                        }
                    }else {
                        //第一次添加
                        let videolike = new VideoLike(this.person.uid,this.vid,this.videoLike,this.videoCollect)
                        this.videolikes.push(videolike)
                        localStorage.setItem("videolikes",JSON.stringify(this.videolikes))
                    }
                    //console.log(this.videolikes)
                }
            },
            //更新视频点赞收藏状态
            save(){
                for (let i = 0; i < this.videolikes.length; i++) {
                    if (this.videolikes[i].vid===this.vid && this.videolikes[i].uid===this.person.uid){
                        this.videolikes[i].isLike=this.videoLike
                        this.videolikes[i].isCollect=this.videoCollect
                    }
                }
                //console.log(this.videolikes)
                localStorage.setItem("videolikes",JSON.stringify(this.videolikes))
            },
            initComment(){
                if (JSON.parse(localStorage.getItem("person"))!=null){
                    if (JSON.parse(localStorage.getItem("remarklikes0"))!=null && JSON.parse(localStorage.getItem("remarklikes0")).length!==0 && this.comment0.length!==0){
                        this.remarklikes0=JSON.parse(localStorage.getItem("remarklikes0"))
                        for (let i = 0; i <this.comment0.length ; i++) {
                            for (let j = 0; j <this.remarklikes0.length ; j++) {
                                if (this.remarklikes0[j].vid===this.vid && this.remarklikes0[j].rid===this.comment0[i].rid && this.remarklikes0[j].uid===this.person.uid){
                                    this.clickLike=this.remarklikes0[j].isLike;
                                    console.log("循环"+this.remarklikes0[j].uid+"---"+this.remarklikes0[j].rid+"----"+this.clickLike)
                                    if (this.clickLike){
                                        var likeBtn = $('#replyLike'+this.remarklikes0[j].uid);
                                        //alert(JSON.stringify(likeBtn))
                                        likeBtn.find('span').css('color','orange');
                                    }else {
                                        likeBtn.find('span').css('color','grey');
                                    }
                                }
                            }
                        }

                    console.log(this.remarklikes0)
                    }
                }
            },
            add(rid,islike){
                let temp=null;
                for (let i = 0; i < this.remarklikes0.length; i++) {
                    if (this.remarklikes0[i].rid===rid && this.remarklikes0[i].uid===this.person.uid && this.remarklikes0[i].vid===this.vid){
                        temp=this.remarklikes0[i]
                        alert("传进来"+this.clickLike)
                        this.remarklikes0[i].isLike=islike;
                    }
                }
                if (temp===null){
                    //第一次添加
                    let rlike = new RemarkLike(rid,this.person.uid,this.vid,this.clickLike)
                    this.remarklikes0.push(rlike)
                }
                console.log("temp="+JSON.stringify(temp))
                console.log("save="+JSON.stringify(this.remarklikes0))
                localStorage.setItem("remarklikes0",JSON.stringify(this.remarklikes0))
                console.log("123"+JSON.parse(localStorage.getItem("remarklikes0")))
            },
            enrolluser(){
                //注册users
                axios({
                    type: 'put',
                    url: '/users/EnrollUser',
                    params: {
                        uid: this.user.username,
                        pwd: this.user.password,
                    }
                }).then(res =>{
                    layer.msg("注册成功");
                });
            },
            enrollperson(){
                axios({
                    type: 'put',
                    url: '/person/EnrollPerson',
                    params: {
                        uid: this.user.username,
                        uname: this.user.uname,
                        uemail: this.user.uemail,
                        uphone: this.user.uphone,
                    }
                }).then(res =>{

                });
            },
            check(){
                if(/^\d{9}$/.test(this.user.username)) {
                    if (/^[0-9]*$/.test(this.user.username)) {
                        if (this.user.password === this.user.password1) {
                            this.enrolluser();
                            this.enrollperson();
                            $('#EnrollWin').modal('hide');
                        } else {
                            layer.msg("密码不一致，请重新输入")
                        }
                    } else {
                        layer.msg("用户账号不正确,只能为数字")
                    }
                }else {
                    layer.msg("用户账号需九位数")
                }
            },

        }
    }).mount("#app")


</script>
</body>
</html>